<template>
  <div class="home">
    <h3 class="title">
      <p> 欢迎{{ username }}登录方硕数据系统</p>
      <p> 请选择查看业务数据或财务数据</p>
    </h3>
    <div class="content">
      <van-collapse v-model="activeNames">
        <van-collapse-item v-for="item in countryList" :key="item.id" :title="item.name" :name="item.id">
          <van-collapse v-model="business">
            <van-collapse-item v-for="key in item.webBusinessList" :key="key.id" :title="key.name" :name="key.id">
              <div class="item" v-if="show('business')" @click="lookBusinessReport(key)">业务数据</div>
              <div class="item" v-if="show('finance')" @click="lookFinanceReport(key)">财务数据</div>
            </van-collapse-item>
          </van-collapse>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import {fetchCountryIndex} from '@/api/index'
import {setLoading, clearToast} from "@/utils";

export default {
  name: "Index",
  data() {
    return {
      activeNames: [],
      countryList: [],
      business: []
    }
  },
  computed: {
    username() {
      return sessionStorage.getItem('name') || ''
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      setLoading()
      fetchCountryIndex().then(res => {
        if (res.code === 200) {
          this.countryList = res.data
          clearToast()
        } else {
          clearToast()
        }
      })
    },
    lookBusinessReport(value) {
      this.$router.push({
        path: '/home/businessData',
        query: {
          ...value
        }
      })
    },
    show(key) {
      const show = sessionStorage.getItem('show')
      if (show === '1' && key === 'business') {
        return true
      } else if (show === '2' && key === 'finance') {
        return true
      } else if (show === '9') {
        return true
      }
      return false
    },
    lookFinanceReport(value) {
      this.$router.push({
        path: '/home/financeData',
        query: {
          ...value
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  .title {
    text-align: center;
    padding: 0 10px;
  }

  .content {
    margin-top: 20px;

    .item {
      height: 40px;
      padding: 0 15px;
      box-sizing: border-box;
      line-height: 40px;
    }

    .item:hover {
      background-color: #f4f4f4;
    }
  }


}
</style>
